/**
* Copyright (c) 2018-present, Chen Guodong
* All rights reserved.
*
* @flow
*/
<template>
  <div class="mine-content">
    <div class="top">
      <div class="header">个人中心</div>
      <img :src="require('../../../static/img/head.png')" alt="">
      <p>{{userInfo.truename}}</p>
    </div>
    <group>
      <!-- <cell title="基本信息" is-link></cell> -->
      <!-- <cell title="修改密码" is-link></cell> -->
      <cell title="我的收藏" is-link @click.native="goCollect"></cell>
      <cell title="版本信息" is-link @click.native="versionInfo"></cell>
      <!-- <cell title="退出" is-link @click.native="loginOut"></cell> -->
      <cell title="注销" is-link @click.native="loginOut"></cell>
    </group>
  </div>
</template>
<script>
import { Badge, Group, Cell } from 'vux'

export default {
  data() {
    return {
      userInfo: {},
    };
  },
  methods: {
    loginOut() {
      localStorage.removeItem("loginInfo");
      this.$router.replace('/login');
    },
    versionInfo(){
    	this.$vux.toast.show({type: 'text', text: 'v1.0.0'})
    },
    goCollect(){
      this.$router.push({path:'/collect'});
    }
  },
  mounted() {
    const loginInfo = JSON.parse(localStorage.getItem("loginInfo"));
    this.userInfo = loginInfo || {};
  },
  components: {
    Badge,
    Group,
    Cell
  },

};

</script>
<style lang='less' scoped>
@import '../../util/theme.less';

.mine-content {
  width: 100%;
  height: 100%;
  background: #fff;

  .top {
    width: 100vw;
    height: 55vw;
    background: url("../../../static/img/mine-bg.png") no-repeat;
    background-size: 100% 100%;
    text-align: center;
    margin-bottom: 10px;

    .header {
      height: 46px;
      width: 100%;
      font-size: 16px;
      text-align: center;
      line-height: 20px;
      color: #fff;
      font-weight: bold;
      line-height: 46px;
    }

    img {
      margin: 8vw auto 2vw;
      height: 18vw;
      width: 18vw;
      border-radius: 20vw;
      display: inline-block;
      border: 1px solid @primary;
    }

    p {
      font-size: 16px;
      color: #fff;
    }
  }
}

.btns {
  li {
    padding: 10px 0;
    margin: 0 16px 10px;
    border-bottom: 1px solid @border-base;
    display: flex;

    .left {
      display: flex;
      align-items: center;
      flex: 1;

      i {
        font-size: 22px;
        color: @primary;
        vertical-align: bottom;
        display: inline-block;
        margin-right: 10px;
      }

      .label {
        font-size: 16px;
        font-weight: bold;
        // color: @font-regular;
      }
    }

    .righ {
      // float: right;
      flex: 1;
      text-align: right;
      // color: @border-base;
    }
  }
}

.cell-icon {
  font-size: 18px;
  color: @primary;
  vertical-align: center;
  display: inline-block;
  margin-right: 6px;
}

</style>
